<template>
  <div class="container">
    <!-- 关闭按钮 -->
    <img
      :src="ImgBaseUrl+'/mp_3.1.6/关闭按钮/安卓/ic_shut.png'"
      @tap="closeMask"
      v-if="ImgBaseUrl"
      alt
      class="close-btn"
    />
    <!-- 标题 -->
    <h2 class="model-title">扣除金银币验证</h2>
    <div class="desc clearfix">
      验证码已经发送至尾号{{user_tel||""}}手机
      <div class="tip" v-if="timer<60">{{timer}}s重新发送</div>
      <div class="tip" v-else @tap="get_code()">重新发送</div>
    </div>
    <div class="inp-bar">
      <input
        type="text"
        class="num-inp"
        maxlength="6"
        v-model="check_num"
        :focus="focus_code"
        @blur="blur_inp()"
      />
      <div
        class="inp-item"
        v-for="(item, index) in show_arr"
        :key="index"
        @tap="inp_focus()"
      >{{item}}</div>
    </div>
    <div class="bottom-bar">金银币会扣除补贴单待返金额，扣除后补贴单会重新计算</div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      // 银币
      silver: 0,
      // 金币
      gold: 0,
      check_num: "",
      show_arr: ["", "", "", "", "", ""],
      // 倒计时
      timer: 60,
      // 计时器
      all_timer: "",
      // 是否聚焦输入框
      focus_code: false
    };
  },
  methods: {
    // 获取验证码
    get_code() {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => {}
      });
       //type 1115:卡券转让 1116:卡券挂售 1117:零钱转让 110:购买(陈畅加的参数，有问题找cc)
      common.fly_post(
        "api/v4_5/order_gold/sms_code",
        this.type ? { type: this.type } : {},
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == "0") {
            this.all_timer = setInterval(() => {
              that.timer--;
              if (that.timer <= 0) {
                clearInterval(that.all_timer);
                that.timer = 60;
              }
            }, 1000);
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {}
            });
          }
        }
      );
    },

    // 验证码提交
    closeMask() {
      this.$emit("closeMask");
    },
    // 输入框聚焦
    inp_focus() {
      this.focus_code = true;
    },
    blur_inp() {
      this.focus_code = false;
    }
  },
  watch: {
    check_num(newVal) {
      let arr = newVal.padEnd(6, "a").split("");
      this.show_arr = arr.map(item => (item == "a" ? "" : item));
      if (newVal.length == 6) {
        // 输入了6位
        this.$emit("model_submit", this.model_type, this.check_num);
      }
    }
  },
  mounted() {
    this.get_code();
  },
  destroyed() {
    clearInterval(this.all_timer);
  },
  props: ["model_type", "tip_msg", "user_tel","type"]
};
</script>

<style lang="less" scoped>
.container {
  width: 335px;
  height: 240px;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px 0;
  box-sizing: border-box;
  .close-btn {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
  }
  .model-title {
    font-size: 18px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 25px;
    position: relative;
  }
  .desc {
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 18px;
    margin-top: 6px;
    .tip {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 115, 164, 1);
      line-height: 18px;
      float: right;
    }
  }
  .inp-bar {
    margin: 36px 0px;
    display: flex;
    justify-content: space-between;
    position: relative;
    .inp-item {
      width: 44px;
      height: 44px;
      background: rgba(243, 244, 246, 1);
      border-radius: 10px;
      font-size: 20px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 44px;
      text-align: center;
    }
    .num-inp {
      width: 0;
      height: 0;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 20;
    }
  }
  .bottom-bar {
    margin: 0px 20px 0;
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 16px;
    text-align: center;
  }
}
</style>